<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tinymce.html.Styles tests</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" href="qunit/qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="qunit/qunit.js"></script>
<script type="text/javascript" src="qunit/runner.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/tiny_mce_loader.js"></script>
<script>
module("tinymce.html.Styles");

test('Basic parsing/serializing', function() {
	var styles = new tinymce.html.Styles();

	expect(11);

	equals(styles.serialize(styles.parse('FONT-SIZE:10px')), "font-size: 10px;");
	equals(styles.serialize(styles.parse('FONT-SIZE:10px;COLOR:red')), "font-size: 10px; color: red;");
	equals(styles.serialize(styles.parse('   FONT-SIZE  :  10px  ;   COLOR  :  red   ')), "font-size: 10px; color: red;");
	equals(styles.serialize(styles.parse('key:"value"')), "key: 'value';");
	equals(styles.serialize(styles.parse('key:"value1" \'value2\'')), "key: 'value1' 'value2';");
	equals(styles.serialize(styles.parse('key:"val\\"ue1" \'val\\\'ue2\'')), "key: 'val\"ue1' 'val\\'ue2';");
	equals(styles.serialize(styles.parse('width:100%')), 'width: 100%;');
	equals(styles.serialize(styles.parse('value:_; value2:"_"')), 'value: _; value2: \'_\';');
	equals(styles.serialize(styles.parse('value: "&amp;"')), "value: '&amp;';");
	equals(styles.serialize(styles.parse('value: "&"')), "value: '&';");
	equals(styles.serialize(styles.parse('value: ')), "");
});

test('Colors force hex and lowercase', function() {
	var styles = new tinymce.html.Styles();

	expect(6);

	equals(styles.serialize(styles.parse('color: rgb(1,2,3)')), "color: #010203;");
	equals(styles.serialize(styles.parse('color: RGB(1,2,3)')), "color: #010203;");
	equals(styles.serialize(styles.parse('color: #FF0000')), "color: #ff0000;");
	equals(styles.serialize(styles.parse('  color:   RGB  (  1  ,  2  ,  3  )  ')), "color: #010203;");
	equals(styles.serialize(styles.parse('   FONT-SIZE  :  10px  ;   COLOR  :  RGB  (  1  ,  2  ,  3  )   ')), "font-size: 10px; color: #010203;");
	equals(styles.serialize(styles.parse('   FONT-SIZE  :  10px  ;   COLOR  :  RED   ')), "font-size: 10px; color: red;");
});

test('Urls convert urls and force format', function() {
	var styles = new tinymce.html.Styles({url_converter : function(url) {
		return '|' + url + '|';
	}});

	expect(9);

	equals(styles.serialize(styles.parse('background: url(a)')), "background: url('|a|');");
	equals(styles.serialize(styles.parse('background: url("a")')), "background: url('|a|');");
	equals(styles.serialize(styles.parse("background: url('a')")), "background: url('|a|');");
	equals(styles.serialize(styles.parse('background: url(   a   )')), "background: url('|a|');");
	equals(styles.serialize(styles.parse('background: url(   "a"   )')), "background: url('|a|');");
	equals(styles.serialize(styles.parse("background: url(    'a'    )")), "background: url('|a|');");
	equals(styles.serialize(styles.parse('background1: url(a); background2: url("a"); background3: url(\'a\')')), "background1: url('|a|'); background2: url('|a|'); background3: url('|a|');");
	equals(styles.serialize(styles.parse("background: url('http://www.site.com/a?a=b&c=d')")), "background: url('|http://www.site.com/a?a=b&c=d|');");
	equals(styles.serialize(styles.parse("background: url('http://www.site.com/a_190x144.jpg');")), "background: url('|http://www.site.com/a_190x144.jpg|');");
});

test('Compress styles', function() {
	var styles = new tinymce.html.Styles();

	expect(3);

	equals(
		styles.serialize(styles.parse('border-top: 1px solid red; border-left: 1px solid red; border-bottom: 1px solid red; border-right: 1px solid red;')),
		'border: 1px solid red;'
	);

	equals(
		styles.serialize(styles.parse('border-width: 1pt 1pt 1pt 1pt; border-style: none none none none; border-color: black black black black;')),
		'border: 1pt none black;'
	);
	
	equals(
		styles.serialize(styles.parse('border-width: 1pt 4pt 2pt 3pt; border-style: solid dashed dotted none; border-color: black red green blue;')),
		'border-width: 1pt 4pt 2pt 3pt; border-style: solid dashed dotted none; border-color: black red green blue;'
	);
});

test('Font weight', function() {
	var styles = new tinymce.html.Styles();

	expect(1);

	equals(styles.serialize(styles.parse('font-weight: 700')), "font-weight: bold;");
});

test('Valid styles', function() {
	var styles = new tinymce.html.Styles({}, new tinymce.html.Schema({valid_styles : {'*' : 'color,font-size', 'a' : 'margin-left'}}));

	expect(2);

	equals(styles.serialize(styles.parse('color: #ff0000; font-size: 10px; margin-left: 10px; invalid: 1;'), 'b'), "color: #ff0000; font-size: 10px;");
	equals(styles.serialize(styles.parse('color: #ff0000; font-size: 10px; margin-left: 10px; invalid: 2;'), 'a'), "color: #ff0000; font-size: 10px; margin-left: 10px;");
});
</script>
</head>
<body>
	<h1 id="qunit-header">tinymce.html.Styles tests</h1>
	<h2 id="qunit-banner"></h2>
	<div id="qunit-testrunner-toolbar"></div>
	<h2 id="qunit-userAgent"></h2>
	<ol id="qunit-tests"></ol>
	<div id="content"></div>
</body>
</html>
